<template>
	<view class="login">
		<view class="content-wrapper">
			<view class="title" style="width: 100%;display: flex;justify-content: center;">
				<!-- <h1>登录</h1> -->
				<image src="/static/logo.png" mode="scaleToFill" style="height: 200upx;width: 200upx;"></image>
			</view>
			<view class="login-form">
				<view class="login-form-items">
					<view class="login-form-items-title">手机号</view>
					<input v-model="form.mobile" type="text" class="login-input" placeholder="请输入手机号" />
					<view @click="clickCode" style="width:180rpx;height:60rpx;display: flex;justify-content: center;">
						<text v-if="!sendFlag" >发送</text>
						<text v-else>{{num}}</text>
					</view>
				</view>
				<view class="login-form-items" v-if="!registFlag">
					<view class="login-form-items-title">图形验证码</view>
					<input v-model="form.graphicVerifyCode" type="text" class="login-input" placeholder="请输入图形验证码" />
					<view class="code-img-wrapper" @click="updateImageCode">
					  <canvas style="width:180rpx;height:60rpx;" canvas-id="canvas"></canvas>
					</view>
				</view>
				
				<view class="login-form-items">
					<view class="login-form-items-title">验证码</view>
					<input v-model="form.code" type="text" class="login-input" placeholder="请输入验证码" />
				</view>
			</view>
		</view>
		<view style="margin: 10px 10px 0 15px;display: flex;justify-content: flex-end;">
			<text>快速登录</text>
		</view>
		<view class="submit-wrapper" style="display: flex;justify-content: space-between;">
			<!-- <button type="primary" class="login-btn" style="width: 45%;" @click="register()">验证码登录</button> -->
			<button @click="submit" type="primary" class="login-btn" style="width: 100%;">登录</button>
		</view>
		
	</view>
</template>
 
<script>
	// 图形验证码
	import { Mcaptcha  } from '@/utils/mcaptcha'
	
	import {getRequest, getPost} from '../../api/api.js'; // 请求接口
	import {loginRegisterUrl, getTokenURL} from '../../api/request.js'; // 请求路径

	export default {
		data() {
			return {
				sendFlag: false,
				num: -1,
				registFlag: false,
				form:{
					graphicVerifyCode: '',
					mobile: '',
					code: ''
				}
			};
		},
		
		onReady() {
		   this.mcaptcha = new Mcaptcha({
		     el: 'canvas',
		     width: 80,
		     height: 35,
		     createCodeImg: ""
		   });
		 },
		
		methods: {
			// 提交前校验图形验证码
			submit() {
			  if(!this.form.graphicVerifyCode) {
			    return uni.showToast({ 
					title: '请输入图形验证码' ,
					icon:'none',
					duration: 2000
					})
			  }
			  let validate = this.mcaptcha.validate(this.form.graphicVerifyCode)
			  if(!validate) {
			    return uni.showToast({ 
					title: '图形验证码错误' ,
					icon:'none',
					duration: 2000
					})
			  }
			  
			  // 验证码成功
			  this.clickLogin1();
			},
			
			// 发送验证码
			clickCode() {
				if(this.num <= 0) { // 说明可以发送验证码
					console.log("已发送");
					this.num = 10;
					this.sendFlag = !this.sendFlag;
					
					// 定时器
					const  tiemInterval = setInterval(()=> {
						if(this.num<=0) {
							this.sendFlag = false;
							clearTimeout(tiemInterval);
						} else {
							this.num--;
						}
					}, 1000);
				} 
			},
			
			// 刷新验证码
			updateImageCode() {
			  this.mcaptcha.refresh()
			},
			
			register() {
				this.registFlag = !this.registFlag;
			},
			
			async clickLogin() {
				await wx.login({
					success (res) {
						console.log(res)
						if (res.code) {
							// 带着code请求后端获取token   /wx/api
							// let getTokenURL = `http://localhost:8160/api/ucenter/wx/callback`
							
							//发起网络请求
							 wx.request({
								url: getTokenURL,
								data: {
									code: res.code
								},
								method:'get',
								success(res) {
									console.log(res.data.data.token);
									uni.setStorageSync("token", res.data.data.token);
									// 关闭当前页面,并且跳转到前一页
									uni.navigateBack();
										
									// 跳转到首页				
									// uni.switchTab({
									// 	url:'/pages/index/index'
									// })
								}
							});
							
							
						} else {
						  console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			
			
			// 点击了登录
			clickLogin1() {
				let param = {
				   "code": this.form.code,
				   "mobile": this.form.mobile,
				}
				console.log(param)
				getPost(loginRegisterUrl, param)
					.then((res)=> {
						console.log(res.data.data.token);
						uni.setStorageSync("token", res.data.data.token);
					
						uni.switchTab({
							url:'/pages/myself/myself'
						})
					})
					.catch((err)=> {
					
					})
			}
				
		 }
	}
</script>
 
<style lang="scss">
	page {
		background: #F4F5F6;
		// width: 100%;
		// height: 100%;
		
	}
	

 
	.login {
		.content-wrapper {
			width: 100%;
 
			.title {
				margin-top: 35rpx;
				width: 100%;
				margin-bottom: 10px;
 
				h1 {
					border: 0px;
					width: 50%;
					margin: 0 auto;
					text-align: center;
					border-bottom: 1px solid #E3E3E3;
					height: 50px;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
					font-weight: 400;
				}
			}
 
			.login-form {
				margin: 20px 10px 20px 15px;
				background: #FFFFFF;
 
				.login-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;
 
					.login-form-items-title {
						width: 30%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}
 
					.login-input {
						// width: 100%
					}
 
					img {
						width: auto;
						height: auto;
						max-width: 100%;
						max-height: 100%;
					}
				}
			}
		}
 
		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
		}
 
	}
</style>